<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>simple_game_client</title>
</head>
<body>
<h1>simple_game_client</h1>
<button type="button" onclick="connect()">连接</button>
<br>
<label for="send_message">发送的消息:</label>
<input type="text" id="send_message" name="message"><br><br>
<button type="button" onclick="send()">发送</button>
<button type="button" onclick="disconnect()">断开</button>


<script>
    var socket;
    function connect() {
        socket = new WebSocket("ws://localhost:8888");
        socket.onopen = function() {
            alert("连接成功");
        };

        socket.addEventListener('open', (event) => {
            console.log('Connected to server');
            // 在此处添加与服务器交互的代码
        });
        socket.addEventListener('message', (event) => {
            console.log(`Received message: ${event.data}`);
            // 在此处添加处理服务器发送的消息的代码
        });
        socket.addEventListener('close', (event) => {
            console.log('Disconnected from server');
            // 在此处添加处理断开连接的代码
        });



        socket.onclose = function(event) {
            if (event.wasClean) {
                alert('连接已关闭');
            } else {
                alert('连接异常断开');
            }
        };
        socket.onerror = function(error) {
            alert("连接错误：" + error.message);
        };
        socket.onmessage = function(event) {
            alert("收到消息：" + event.data);
        };
    }

    function send() {
        var message2 = document.getElementById("send_message").value;
        alert(message2)
        socket.send(message2);
    }

    function disconnect() {
        socket.close();
    }

</script>
</body>
</html>


